<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>零食售卖</title>

    <link rel="stylesheet" href="css/basic.css">
</head>

<body>

    <body style=" background: linear-gradient(to bottom, #b7bfc5, #b10e62d7);"></body>
    <h1>快来选择你喜欢的零食吧~</h1>
    <hr>
    <div class="cart-item">
        <div class="product">
            <img src="img/开心果.jpg" alt="商品1">
            <span>香脆开心果</span>
            <input type="number" value="0" min="1">
            <span>¥20</span>
            <button class="collected" snack="香脆开心果">收藏</button>
        </div>
    </div>
    <div class="cart-item">
        <div class="product">
            <img src="img/盼盼.jpg" alt="商品2">
            <span>柔软面包</span>
            <input type="number" value="0" min="1">
            <span>¥15</span>
            <button class="collected" snack="柔软面包">收藏</button>
        </div>
    </div>
    <div class="cart-item">
        <div class="product">
            <img src="img/糖果.jpg" alt="商品3">
            <span>多味糖果</span>
            <input type="number" value="0" min="1">
            <span>¥10</span>
            <button class="collected" snack="多味糖果">收藏</button>
        </div>
    </div>
    <div class="cart-item">
        <div class="product">
            <img src="img/薯片.jpg" alt="商品4">
            <span>美味薯片</span>
            <input type="number" value="0" min="1">
            <span>¥10</span>
            <button class="collected" snack="美味薯片">收藏</button>
        </div>
    </div>
    <div class="cart-item">
        <div class="product">
            <img src="img/辣条.png" alt="商品5">
            <span>爽口辣条</span>
            <input type="number" value="0" min="1">
            <span>¥20</span>
            <button class="collected" snack="爽口辣条">收藏</button>
        </div>
    </div>
    <div class="cart-item">
        <div class="product">
            <img src="img/饼干.jpg" alt="商品6">
            <span>巧克力饼干</span>
            <input type="number" value="0" min="1">
            <span>¥25</span>
            <button class="collected" snack="巧克力饼干">收藏</button>
        </div>
    </div>
    <button onclick="calculateTotal()">计算总价</button>
    <p id="totalPrice"></p>

    <script src="js/func.js"></script>

    <script src="js/数据交互.js"></script>

    <script src="../Personal/js/前后端数据交互.js"></script>
</body>

</html>